<template>
  <div>
    <h1 style="color: orange">{{c.id==null?'发布页面':'修改页面'}}</h1>
    <el-form label-width="80px">
      <el-form-item label="文章标题">
        <el-input placeholder="请输入文章标题" v-model="c.title"></el-input>
      </el-form-item>
      <el-form-item label="文章分类">
        <el-radio-group v-model="c.type" @input="handleInput">
          <el-radio-button v-for="t in typeArr" :label="t.id">{{ t.name }}</el-radio-button>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="二级分类">
        <el-select v-model="c.categoryId">
          <el-option v-for="cat in categoryArr"
                     :label="cat.name" :value="cat.id"></el-option>

        </el-select>
      </el-form-item>
      <el-form-item label="封面">
        <el-upload
            :action="BASE_URL+'/v1/upload'"
            name="file"
            :limit="1"
            list-type="picture-card"
            :on-success="handleSuccess"
            :on-preview="handlePictureCardPreview"
            :on-remove="handleRemove">
          <i class="el-icon-plus"></i>
        </el-upload>
        <el-dialog :visible.sync="dialogVisible">
          <img width="100%" :src="dialogImageUrl" alt="">
        </el-dialog>
      </el-form-item>
      <el-form-item v-show="c.type!=5" label="文章内容">
        <div id="content_div"></div>
      </el-form-item>
      <el-form-item v-show="c.type==5" label="视频">
        <el-upload
            :action="BASE_URL+'/v1/upload'"
            name="file"
            :limit="1"
            accept="video/*"
            :on-success="handleSuccess"
            :on-preview="handlePictureCardPreview"
            :on-remove="handleRemove">
          <el-button type="primary">点击上传视频</el-button>
          <div>只能上传mp4文件,且不超过100MB</div>
        </el-upload>
      </el-form-item>
      <el-form-item>
        <el-button type="success" @click="post()">{{c.id==null?'发布':'修改'}}</el-button>
      </el-form-item>
    </el-form>

  </div>
</template>

<script>
export default {
  name: "PersonalPostView",
  data() {
    return {
      c: {title: "", type: "1", categoryId: ""},
      dialogImageUrl: '',
      dialogVisible: false,
      typeArr: [],
      categoryArr: []
    }
  },
  methods: {
    post(){
      if (this.c.imgUrl==null){
        this.$message.error("请选择封面!");
        return;
      }
      if (this.c.title.trim()==""){
        this.$message.error("标题不能为空")
        return;
      }
      if (this.c.type!=5){//非视频
        //把富文本编辑器里面的内容取出
        this.c.content = this.editor.txt.html();
        //设置摘要  从文章的文本内容中截取前50个字符作为摘要
        this.c.brief = this.editor.txt.text().slice(0,50);
      }else{
        if (this.c.videoUrl==null){
          this.$message.error("请选择视频文件!");
          return;
        }
      }

      let user = localStorage.user?JSON.parse(localStorage.user):null;
      if (user==null){
        alert("请先登录!");
        this.$router.push('/login');
        return;
      }
      this.c.createBy = user.id;

      //将c对象转成查询字符串格式
      let data = this.qs.stringify(this.c);
      //发请求把文章想的数据提交到服务器
      this.axios.post(this.BASE_URL+'/v1/contents/add-new',data)
      .then((response)=>{
        if (response.data.code==1){
          if (this.c.id==null){
            this.$message.success("发布完成!");
            //跳转到稿件管理页面
            this.$router.push('/personal/management');
          }else{
            this.$message.success("修改完成!");
            if (localStorage.editPageFrom=='admin'){
              //跳转到后台页面
              this.$router.push('/admin/content');
              localStorage.editPageFrom=null;//清空
            }else{
              //跳转到稿件管理页面
              this.$router.push('/personal/management');
            }
          }


        }
      })


    },
    handleSuccess(response,file,fileList){
      // response=JsonResult    response.data=图片路径
      //判断上传的文件是图片还是视频
      if (file.raw.type.includes('image')){//图片
        this.c.imgUrl = response.data;
      }else{//视频
        this.c.videoUrl = response.data;
      }
    },
    loadSubCategories() {
      //通过type(一级分类的id)查询对应的二级分类数据
      this.axios.get(this.BASE_URL + '/v1/categories/' + this.c.type + '/sub')
          .then((response) => {
            if (response.data.code == 1) {
              //把请求回来的数据赋值给二级分类的数组
              this.categoryArr = response.data.data;
            }
          })
    },
    handleInput() {
      this.c.categoryId = "";//把记录的二级分类id去掉 因为此时一级分类已经改变
      this.loadSubCategories();
    },
    handleRemove(file, fileList) {
      //判断删除的是图片还是视频
      if (file.raw.type.includes('image')){
        this.c.imgUrl = null;
      }else{
        this.c.videoUrl = null;
      }

      this.axios.post(this.BASE_URL+'/v1/remove?url='+file.response.data)
          .then((response)=>{
            if (response.data.code==1){
              this.$message.success("删除完成!");
            }
          })
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    }
  },
  mounted() {//页面元素加载完成并且Vue框架和元素挂载完成后调用的方法
    //http://localhost:9090/post?id=28
    if (location.search.includes('id')){//代表修改
      let id = new URLSearchParams(location.search).get('id');
      //通过id查询文章详情数据
      this.axios.get(this.BASE_URL+'/v1/contents/'+id+'/update')
          .then((response)=>{
            if (response.data.code==1){
              this.c = response.data.data;
              //此时一级分类的id发生改变需要再次请求对应的二级分类数据
              this.loadSubCategories();
              //把内容显示到富文本编辑器中
              this.editor.txt.html(this.c.content);

            }
          })
    }


    this.loadSubCategories();
    //通常在此处做一些初始化操作,比如富文本编辑器初始化, 或者发请求的代码
    //初始化富文本编辑器
    this.editor = new this.wangEditor("#content_div");
    this.editor.create();
    //请求一级分类的数据
    this.axios.get(this.BASE_URL + '/v1/categories/type-list')
        .then((response) => {
          if (response.data.code == 1) {
            this.typeArr = response.data.data;
          }
        })


  }
}
</script>

<style scoped>

</style>